<template>
  <div class="AdjustThePost">
    <div class="infoBox">
      <div class="logo">
        <img src="@/assets/common/img.jpeg" alt>
      </div>
      <div class="info">
        <p>
          <span class="name">{{ ruleForm.data.username }}</span>
        </p>
        <p>
          <span>部门：</span>
          {{ ruleForm.data.departmentName }}
        </p>
        <p>
          <span>入职时间：</span>
          {{ ruleForm.data.timeOfEntry | formatDate }}
        </p>
      </div>
    </div>
    <div>
      <!-- 请假表单 -->
      <div v-if="selectedName ==='process_leave'">
        <el-form ref="ruleForm" :model="ruleForm" label-width="100px" class="demo-ruleForm">

          <el-form-item label="开始时间：" prop="startTime">
            <el-date-picker
              v-model="ruleForm.data.startTime"
              type="datetime"
              placeholder="选择日期"
            />
          </el-form-item>
          <el-form-item label="结束时间：" prop="endTime">
            <el-date-picker
              v-model="ruleForm.data.endTime"
              type="datetime"
              placeholder="选择日期"
            />
          </el-form-item>
          <el-form-item label="请假时长：" prop="duration">
            <el-input v-model="ruleForm.data.duration" style="width: 220px;" :disabled="true" />
          </el-form-item>
          <el-form-item label="申请原因：" prop="cause">
            <el-input
              v-model="ruleForm.data.reason"
              type="textarea"
              style="width: 400px;"
              placeholder="显示请假人填写的请假原因"
            />
          </el-form-item>
        </el-form>
      </div>

      <!-- 离职表单 -->
      <div v-if="selectedName ==='process_dimission'">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          label-width="120px"
          class="demo-ruleForm"
        >

          <el-form-item label="期望离职时间：" prop="expectedDepartureTime">
            <el-date-picker
              v-model="ruleForm.data.exceptTime"
              type="date"
              format="yyyy-MM-dd"
              placeholder="选择日期"
            />
          </el-form-item>
          <el-form-item label="离职原因：" prop="reasonsForLeaving">
            <el-input
              v-model="ruleForm.data.reason"
              type="textarea"
              style="width: 400px;"
              placeholder="显示提交人填写的离职原因"
            />
          </el-form-item>
        </el-form>
      </div>

      <!-- 加班表单 -->
      <div v-if="selectedName ==='process_overtime'">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          label-width="120px"
          class="demo-ruleForm"
        >
          <el-form-item label="补偿方式" prop="types">
            调休
          </el-form-item>
          <el-form-item label="加班开始时间" prop="timeValue">
            <el-date-picker
              v-model="ruleForm.data.start_time"
              format="yyyy-MM-dd HH:mm:ss"
              type="date"
              placeholder="选择日期"
            />
          </el-form-item>
          <el-form-item label="加班结束时间" prop="timeValue">
            <el-date-picker
              v-model="ruleForm.data.end_time"
              type="date"
              format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期"
            />
          </el-form-item>
          <el-form-item label="申请原因" prop="evaluate">
            <el-input
              v-model="ruleForm.data.reason"
              type="textarea"
              style="width: 400px;"
              placeholder="显示加班人填写的加班原因"
            />
          </el-form-item>
        </el-form>
      </div>

    </div>
  </div>
</template>

<script>

import { getApprovalsDetail } from '@/api/approvals'
export default {
  name: 'UsersTableIndex',
  props: {
    selectedName: {
      type: String,
      default: ''
    },
    id: {
      type: String,
      default: ''
    }
  },

  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      timeValue: '',
      ruleForm: {
        data: {

        }

      }
    }
  },
  created() {
    // this.getApprovalsDetail()
  },
  methods: {
    async  getApprovalsDetail(id) {
      const { procData, ...data } = await getApprovalsDetail(id)
      //   console.log(procData)
      // 数据改造将 json格式的改成对象
      const aa = JSON.parse(procData)
      //   console.log(aa)
      //   console.log(data)
      this.ruleForm.data = { ...aa, ...data }
      console.log(this.ruleForm.data)
    }
  }

}
</script>

<style  lang="scss" scoped>

.AdjustThePost {
  .infoBox {
    display: flex;
    border-bottom: solid 1px #ccc;
    margin-bottom: 20px;
    padding: 10px 0 20px 0;
    img {
      width: 100px;
      height: 100px;
      border-radius: 50%;
    }
    .logo {
      border: solid 1px #ccc;
      width: 102px;
      height: 102px;
      border-radius: 50%;
      margin-right: 20px;
    }
    .info {
      p {
        line-height: 30px;
        .name {
          font-size: 16px;
        }
        span {
          font-weight: bold;
          display: inline-block;
          margin-right: 0px;
          margin-left: 10px;
        }
      }
    }
    .buttones {
      text-align: center;
    }
  }
}
</style>
